<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/table/table.js" charset="utf-8"></script>
<style type="text/css"> 
/*t_r_content和cl_freeze高度相差20px， 高度为外观显示高度，可根据情况调整*/ 
.t_r_content{width:100%; height:345px;overflow:auto;} 
.cl_freeze{width:100%;height:325px; overflow:hidden; } 
/* width 调整左边标题列宽度（左侧外观显示宽度）; 指定为width:auto 在Opera下显示有问题; height比 t_r_content 高度小20px*/
/* width 宽度为 右侧外观显示宽度 实际显示宽度大小为“t_r”宽度加上“cl_freeze”宽度 */ 
/* 如果显示不正常，调整 t_r的width 使其和t_left的width之和小于100%；等于100%时会有问题*/ 
.t_r{width:100%; height:auto; float:left;}
.t_r table.ccay-table{width:1500px;position:relative} 
.t_r_title{width:1520px;}/*宽度比 t_r table 大20px （至少大20，小了滚动条滑到右侧显示有问题）*/ 
.t_r_t{width:100%; overflow:hidden;} 
.list td {border: 0px;} /*以下三个样式解决suggest在table中的样式问题*/
.suggest_head_div table td {border: 0px;}
.suggest_body_div table td {border: 0px;}
</style> 
<script> 
  function aa(){ 
     // var a=document.getElementById("t_r_content").scrollTop; 
     var b=document.getElementById("t_r_content").scrollLeft; 
     // 冻结列上下滚动
     // document.getElementById("cl_freeze").scrollTop=a; 
     // 左右滚动
     document.getElementById("t_r_t").scrollLeft=b; 
  } ;
  var conf ={
		   url: "services/ccay/enums/itemquery/list/YesNoEnum/zh_CN",/*设置访问url*/
		   displayField:"displayValue",/*显示值，显示在联想框文本框中 */
		   valueField:"value"/*实际值，联想框保存的实际value */
		 };
		$("#suggest1").ccaySuggest(conf);/*调用ccaySuggest,初始化联想框*/

</script> 

<div id="tableDemo">
   <!--  <div title='API' tabid='tab1'></div> -->	
	<div title='form_table' tabid='tab2'>
		    <form class="init ccay-form" >
			 	<table class="ccay-table">
				 	<tr>
				 		<th class='require'>下拉框</th>
				 		<td><input type="text" name="category" class="init ccay-combobox" service="REST:services/ccay/enums/itemquery/list/YesNoEnum/zh_CN" valueField="value" displayField="displayValue" /></td>
				 		<th>title</th>
				 		<td><input type='text'></td>
				 	</tr>
				 	<tr>
				 		<th>title</th>
				 		<td><input type='text'></td>
				 		<th>title</th>
				 		<td><input type='text'></td>
				 	</tr>
				 	<tr>
				 		<th>title</th>
				 		<td><input type='text'></td>
				 		<th>title</th>
				 		<td><input type='text'></td>
				 	</tr>
				 	<tr>
				 		<th>title</th>
				 		<td><input type='text'></td>
				 		<th>title</th>
				 		<td><input type='text'></td>
				 	</tr>
			 	</table>
				 <div class="ccay-operate">
				 	<input type="button" value="Input Button" />
				 </div>
			</form>
			<div>
				<span>生成表单Table，设置form标签的class="ccay-form"，table标签的class="ccay-table"，如果该行是必填项，则设置th标签的class='require'；<br>生成表单按钮，设置div标签的class="ccay-operate"</span>
			</div>
			<div class="codeArea">
				<pre id='formTab'>
&lt;form class="init ccay-form" &gt;
 	&lt;table class="ccay-table"&gt;
	 	&lt;tr&gt;
	 		&lt;th class='require'&gt;title&lt;/th&gt;
	 		&lt;td&gt;&lt;input type='text'&gt;&lt;/td&gt;
	 		&lt;th&gt;title&lt;/th&gt;
	 		&lt;td&gt;&lt;input type='text'&gt;&lt;/td&gt;
	 	&lt;/tr&gt;
	 	&lt;tr&gt;
	 		&lt;th&gt;title&lt;/th&gt;
	 		&lt;td&gt;&lt;input type='text'&gt;&lt;/td&gt;
	 		&lt;th&gt;title&lt;/th&gt;
	 		&lt;td&gt;&lt;input type='text'&gt;&lt;/td&gt;
	 	&lt;/tr&gt;
	 	&lt;tr&gt;
	 		&lt;th&gt;title&lt;/th&gt;
	 		&lt;td&gt;&lt;input type='text'&gt;&lt;/td&gt;
	 		&lt;th&gt;title&lt;/th&gt;
	 		&lt;td&gt;&lt;input type='text'&gt;&lt;/td&gt;
	 	&lt;/tr&gt;
	 	&lt;tr&gt;
	 		&lt;th&gt;title&lt;/th&gt;
	 		&lt;td&gt;&lt;input type='text'&gt;&lt;/td&gt;
	 		&lt;th&gt;title&lt;/th&gt;
	 		&lt;td&gt;&lt;input type='text'&gt;&lt;/td&gt;
	 	&lt;/tr&gt;
 	&lt;/table&gt;
	 &lt;div class="ccay-operate"&gt;
	 	&lt;input type="button" value="Input Button" /&gt;
	 &lt;/div&gt;
&lt;/form &gt;</pre>
			</div>
			<div class="try">
				<a  onclick="Ccay.example.openTry('#tableDemo','',$('#formTab').html())">亲自试一试</a>
			</div>
	</div>
	<div title='list_table' tabid='tab3'>
		    <div class="demo">
	               <table class="ccay-table">
						<tr>
							<th>title</th>
							<th>title</th>
							<th>title</th>
							<th>title</th>
							<th>title</th>
							<th>title</th>
							<th>title</th>
						</tr>
						<tr>
							<td>data</td>
							<td>data</td>
							<td>data</td>
							<td>data</td>
							<td>data</td>
							<td>data</td>
							<td>data</td>
						</tr>
					 	<tr>
							<td>data</td>
							<td>data</td>
							<td>data</td>
							<td>data</td>
							<td>data</td>
							<td>data</td>
							<td>data</td>
						</tr>
					</table>
			</div>    
			<div>
				<span>生成列表Table，设置table标签的class="ccay-table"</span>
			</div>
			<div class='codeArea'>
				<pre id='listTab'>
&lt;table class="ccay-table"&gt;
	&lt;tr&gt;
		&lt;th&gt;title&lt;/th&gt;
		&lt;th&gt;title&lt;/th&gt;
		&lt;th&gt;title&lt;/th&gt;
		&lt;th&gt;title&lt;/th&gt;
		&lt;th&gt;title&lt;/th&gt;
		&lt;th&gt;title&lt;/th&gt;
		&lt;th&gt;title&lt;/th&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
	&lt;/tr&gt;
 	&lt;tr&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
		&lt;td&gt;data&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</pre>
			</div>
			<div class="try">
				<a onclick="Ccay.example.openTry('#tableDemo','',$('#listTab').html())">亲自试一试</a>
			</div>	
	</div> 
 	<div title='固定列头' tabid='tab4'>
		<div style="width:100%;"> 
			<div class="t_r"> 
			    <div class="t_r_t" id="t_r_t"> 
			        <div class="t_r_title"> 
			            <table class="ccay-table"> 
			             <tr> 
			               <th width="10%">性别</th> 
			               <th width="10%">年龄</th> 
			               <th width="10%">工号</th> 
			               <th width="20%">地址</th> 
			               <th width="20%">毕业学校</th> 
			               <th width="30%">个人简介</th> 
			             </tr> 
			            </table> 
			        </div> 
			    </div> 
			  <div class="t_r_content" id="t_r_content" onscroll="aa()"> 
			      <table class="ccay-table"> 
			        <tr> 
			          <td width="10%"><input type="text" id="suggest1" name="suggest1" style="width:100px;"/></td> 
			          <td width="10%">1</td> 
			          <td width="10%">1</td> 
			          <td width="20%">1</td> 
			          <td width="20%">1</td> 
			          <td width="30%">1</td> 
			        </tr> 
			        <tr> 
			          <td>2</td> 
			          <td>2</td> 
			          <td>2</td> 
			          <td>2</td> 
			          <td>2</td> 
			          <td>2</td> 
			        </tr> 
			        <tr> 
			          <td>3</td> 
			          <td>3</td> 
			          <td>3</td> 
			          <td>3</td> 
			          <td>3</td> 
			          <td>3</td> 
			        </tr> 
			        <tr> 
			          <td>4</td> 
			          <td>4</td> 
			          <td>4</td> 
			          <td>4</td> 
			          <td>4</td> 
			          <td>4</td> 
			        </tr> 
			        <tr> 
			          <td>5</td> 
			          <td>5</td> 
			          <td>5</td> 
			          <td>5</td> 
			          <td>5</td> 
			          <td>5</td> 
			        </tr> 
			        <tr> 
			          <td>6</td> 
			          <td>6</td> 
			          <td>6</td> 
			          <td>6</td> 
			          <td>6</td> 
			          <td>6</td> 
			        </tr> 
			        <tr> 
			          <td>7</td> 
			          <td>7</td> 
			          <td>7</td> 
			          <td>7</td> 
			          <td>7</td> 
			          <td>7</td> 
			        </tr> 
			        <tr> 
			          <td>8</td> 
			          <td>8</td> 
			          <td>8</td> 
			          <td>8</td> 
			          <td>8</td> 
			          <td>8</td> 
			        </tr> 
			        <tr> 
			          <td>9</td> 
			          <td>9</td> 
			          <td>9</td> 
			          <td>9</td> 
			          <td>9</td> 
			          <td>9</td> 
			        </tr> 
			        <tr> 
			          <td>10</td> 
			          <td>10</td> 
			          <td>10</td> 
			          <td>10</td> 
			          <td>10</td> 
			          <td>10</td> 
			        </tr> 
			        <tr> 
			          <td>11</td> 
			          <td>11</td> 
			          <td>11</td> 
			          <td>11</td> 
			          <td>11</td> 
			          <td>11</td> 
			        </tr> 
			        <tr> 
			          <td>12</td> 
			          <td>12</td> 
			          <td>12</td> 
			          <td>12</td> 
			          <td>12</td> 
			          <td>12</td> 
			        </tr> 
			        <tr> 
			          <td>13</td> 
			          <td>13</td> 
			          <td>13</td> 
			          <td>13</td> 
			          <td>13</td> 
			          <td>13</td> 
			        </tr> 
			        <tr> 
			          <td>14</td> 
			          <td>14</td> 
			          <td>14</td> 
			          <td>14</td> 
			          <td>14</td> 
			          <td>14</td> 
			        </tr> 
			        <tr> 
			          <td>15</td> 
			          <td>15</td> 
			          <td>15</td> 
			          <td>15</td> 
			          <td>15</td> 
			          <td>15</td> 
			        </tr> 
			        <tr> 
			          <td>16</td> 
			          <td>16</td> 
			          <td>16</td> 
			          <td>16</td> 
			          <td>16</td> 
			          <td>16</td> 
			        </tr> 
			        <tr> 
			          <td>17</td> 
			          <td>17</td> 
			          <td>17</td> 
			          <td>17</td> 
			          <td>17</td> 
			          <td>17</td> 
			        </tr> 
			        <tr> 
			          <td>18</td> 
			          <td>18</td> 
			          <td>18</td> 
			          <td>18</td> 
			          <td>18</td> 
			          <td>18</td> 
			        </tr> 
			        <tr> 
			          <td>19</td> 
			          <td>19</td> 
			          <td>19</td> 
			          <td>19</td> 
			          <td>19</td> 
			          <td>19</td> 
			        </tr> 
			        <tr> 
			          <td>20</td> 
			          <td>20</td> 
			          <td>20</td> 
			          <td>20</td> 
			          <td>20</td> 
			          <td>20</td> 
			        </tr> 
			      </table> 
			  </div> 
			</div>
		</div>  	
 	
 	</div> 
	<div title="使用编辑器的校验问题" tabid="Demo16">
	  <div class="demo">
	     <div style="width:100%; overflow:auto;"> 
			  <form class="init ccay-form" style="width:1400px;" id="formtable"> 
			      <table class="ccay-table" style="position:relative;"> 
				      <tr> 
		               <th>性别<font color="red">*</font></th> 
		               <th>年龄<font color="red">*</font></th> 
		               <th>工号<font color="red">*</font></th> 
		               <th>毕业学校<font color="red">*</font></th> 
		               <th>个人简介<font color="red">*</font></th> 
		             </tr>
			        <tr> 
			          <td><input type="text" class="required" name="testName1"/></td> 
			          <td><input type="text" class="required" name="testName2"/></td> 
			          <td><input type="text" class="required" name="testName3"/></td> 
			          <td><input type="text" class="required" name="testName4"/></td> 
			          <td><input type="text" class="required" name="testName5"/></td> 
			        </tr> 
			        <tr> 
			          <td>2</td> 
			          <td>2</td> 
			          <td>2</td> 
			          <td>2</td> 
			          <td>2</td> 
			        </tr> 
			        <tr> 
			          <td>3</td> 
			          <td>3</td> 
			          <td>3</td> 
			          <td>3</td> 
			          <td>3</td> 
			        </tr> 
			        <tr> 
			          <td>4</td> 
			          <td>4</td> 
			          <td>4</td> 
			          <td>4</td> 
			          <td>4</td> 
			        </tr> 
			        <tr> 
			          <td>5</td> 
			          <td>5</td> 
			          <td>5</td> 
			          <td>5</td> 
			          <td>5</td> 
			        </tr> 
			      </table> 
			  </form> 
		 </div>
		 <br/><br/>
		 <input type="button" value="点击进行table的数据验证"  onclick="$('#formtable').valid();" />
	  </div>
	  	<h3>说明</h3>
		<div class="codeArea">
			<pre id='html116'>
描述：使用自定义的table来进行数据的展示和编辑时，使用到了框架的编辑器，校验不通过时，当table横向滚动时，校验信息不随着滚动而移动。
<p></p>
解决方案：table添加样式 <font color="red"> "position:ralative" </font>
			</pre>
		</div>	
	</div>
	<div title="试一试" tabid="trytab" >
		    <fieldset class='ccay-demo'>
		    <legend ><h2>代码区</h2></legend>
			   
			   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 
	
					<div>
					    <table  style="width:100%;">
					      <tr>
					        <td style="width:100%;">
							<h3>js Code:</h3>	
							  <!-- 高度按需来调整。默认最小应为100px -->					
		                      <textarea id="jsTxt" style="height:50px;width:99%;"></textarea>
		                    </td>   
		                  </tr>
		                  <tr>
		                    <td style="width:100%;">
							<h3>html Code:</h3>
							  <!-- 高度按需来调整。默认最小应为100px -->
		                      <textarea id="htmlTxt" style="height:200px;width:99%;"></textarea>
		                    </td>
		                  </tr> 
	                    </table>
					</div>
	           </fieldset>
	        <fieldset class='ccay-demo'>
	          <legend ><h2>结果区</h2></legend>
				<div>
					<div style="overflow:auto;" id="demoMainPanel"></div>
				</div>
	        </fieldset>
	     </div>
	<div title="FAQ">
	  <form class="init ccay-form">
	    <div class="ccay-form-body">
	    <ul>
	            <li class="ccay-form-row">
		            <samp><h3>问题</h3></samp>
		           <span class="ccay-form-input">
		               <h3>解决方案</h3>
		           </span>
		        </li>
	    </ul>
		</div>     
		<div class="ccay-form-custom">
		    <ul>                     
		        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
		        <li class="ccay-form-row">
		                          <samp class="i18n" i18nKey=""></samp>                          
		                         <span class="ccay-form-input"></span>
		        </li>  
		    </ul>
		</div>
	  </form>                    
    </div>  
</div>	 
